<template>
	<view class="">
		<!-- <uni-nav-bar title="新股详情"  fixed empty backgroundColor="#fff">
			<view class="flex align-center" slot="left">
				<tui-icon @click="navBack"  name="arrowleft"  :size="22"></tui-icon>
			</view>
		</uni-nav-bar> -->
		<tt-navbar :left="true" title="新股详情" rightText="" @lclick="navBack" ></tt-navbar>
		<view class="page padding">
			<view class="tit">基本资料</view>
			<view class="card text-nomal">
				<view class="flex align-center padding-tb-sm">
					<text class="text-gray">股票代码</text>
					<text class="padding-left">{{detail.code}}</text>
					<text class="text-gray margin-left-xl">申购代码</text>
					<text class="padding-left">{{detail.sgcode}}</text>
				</view>
				<view class="flex align-center padding-tb-sm" v-if="detail.content">
					<text class="text-gray flex-grow-0">所属行业</text>
					<text class="padding-left">{{detail.content}}</text>
				</view>
				<view class="flex align-center padding-tb-sm">
					<text class="text-gray">行业市盈</text>
					<text class="padding-left">{{detail.fx_rate}}%</text>
					<text class="text-gray margin-left-xl">所属板块</text>
					<text class="padding-left text-orange">{{detail.sg_type_text}}</text>
				</view>
			</view>
			
			<view class="tit">发行信息</view>
			<view class="card text-nomal">
		
				<view class="flex align-center padding-tb-sm justify-between">
					<text class="text-gray flex-grow-0">发行价格(元)</text>
					<text class="padding-left">{{detail.fx_price || 0.00}}</text>
				</view>
				<view class="flex align-center padding-tb-sm justify-between">
					<text class="text-gray flex-grow-0">发行数量(万股)</text>
					<text class="padding-left">{{detail.fx_num/10000 || 0}}</text>
				</view>
				<view class="flex align-center padding-tb-sm justify-between">
					<text class="text-gray flex-grow-0">网上发行数量(万股)</text>
					<text class="padding-left">{{detail.wsfx_num/10000 || 0 }}</text>
				</view>
			</view>
			
			<view class="pos-b">
				<view v-show="kqssss>0">申购(手数)</view>
				<!-- <tui-numberbox :min="1" @change="changeNum" :step="1"  :value="handNum" :width="160" :max="detail.sg_limit*1/100"></tui-numberbox> -->
				<tui-numberbox v-show="kqssss>0" :min="1" @change="changeNum" :step="1"  :value="handNum" :width="160" :max="maxxg"></tui-numberbox>
				<!-- <tui-button @click="submit" margin="0 0 0 30rpx" type="theme" :size="28" height="80rpx">￥{{payTotal}}申购</tui-button> -->
				<tui-button :loading="submiting" :disabled="submiting" @click="submit" margin="0 0 0 30rpx" type="theme" :size="28" height="80rpx">一键申购</tui-button>
			</view>
			
			
		</view>
	</view>
	
</template>

<script setup>
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { newStockDetail, newStockAdd } from '@/api/index.js'

const handNum = ref(0)
const detail = ref({})
const items = ref([
  {
    title: "申购",
    desc: "2020-04-01"
  }, {
    title: "配号",
    desc: "2020-04-01"
  }, {
    title: "中签",
    desc: "2020-04-01"
  }, {
    title: "上市",
    desc: "暂未上市"
  }
])
const activeSteps = ref(1)
const maxxg = ref(10000)
const psjy0_ss = ref(0)
const submiting = ref(false)
const kqssss = ref(0)

const navBack = () => {
	uni.navigateBack()
}

const payTotal = computed(() => {
  return (handNum.value * 100 * detail.value.fx_price).toFixed()
})

const changeNum = (e) => {
  handNum.value = e.value
}

const submit = () => {
  tui.modal(null, '确定申购吗？', true, (e) => {
    console.log(e)
    if(e) {
      submiting.value = true
      newStockAdd({
        code: detail.value.code,
        sg_nums: handNum.value,
        total_nums: handNum.value * 100,
        money: payTotal.value
      }).then(res => {
        tui.modal(null, res.msg, false, () => {
          if(res.code == 1) {
            submiting.value = false
            uni.redirectTo({
              url: '/pages/shengou/index'
            })
          } else {
            submiting.value = false
          }
        })
      })
    } else {
      submiting.value = false
    }
  })
}

const getDetail = (id) => {
  newStockDetail({ id }).then(res => {
    detail.value = res.data.info
    console.log(res.data.maxxg)
    console.log(res.data.psjy0_ss)
    maxxg.value = parseInt(res.data.maxxg)
    psjy0_ss.value = parseInt(res.data.psjy0_ss)
    kqssss.value = parseInt(res.data.kqssss)
  })
}

onLoad((t) => {
  getDetail(t.id)
})
</script>

<style lang="scss" scoped>
	.boxshow{
		box-shadow: 0 0rpx 16rpx rgba(0, 0, 0, 0.14);
		border-radius: 16rpx
	}
	.tit{font-size: 30rpx;font-weight: bold;margin: 20rpx 0;padding-top: 10rpx}
	.card{
		@extend .boxshow;
		padding: 0 20rpx;
	}
	.pos-b{position: fixed;left: 0;bottom: 0;padding: 20rpx;
		width: 100%;box-sizing: border-box;
		display: flex;align-items: center;
		background: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.14);
	}
</style>